
import {TreeViewElement} from "./TreeViewElement";

export class TreeView extends React.Component {

    state={
        parentData:{},
        nodeData:{},
        defaultinit:false,
        isCheckBox:false,
    }

    componentDidMount(){
        console.log(this.props.dataSource)
    }

    /**
     * checkBox 支持
     * @param bl
     */
    checkBoxSuport=(bl)=>{
        this.state.isCheckBox=bl;
        this.setState(this.state);
    }


    /**
     * 渲染子节点
     * @param item 数据源
     * @param space 空格数量
     * @returns {*} 数的节点组
     */
    renderSubNode=(item,space)=>{

        if(!this.state.parentData["_"+item[this.state.map.id]]){
            return "";
        }
        return this.state.parentData["_"+item[this.state.map.id]].map((data)=>{
           data.space=space+1;
           return this.element(data,space,this.renderSubNode(data,data.space));
        })
    }
    /**
     * 获取树的编号
     * @param item 数据源
     * @returns {Array} 数组
     */
    getGroupIds=(item)=>{
        let arr=[];
        for(let key in item._data.ids){
            arr.push(key);
        }
        return arr;
    }
    /**
     * 增加节点
     * @param item
     * @param subdata
     */
    addNode=(item,subdata)=>{

        if(!this.state.parentData["_"+item[this.state.map.id]]){
            this.state.parentData["_"+item[this.state.map.id]]=[];
        }
        subdata.space=item.space+1;
        this.state.nodeData["_"+subdata[this.state.map.id]]=subdata;
        this.state.parentData["_"+item[this.state.map.id]].push(this.state.nodeData["_"+subdata[this.state.map.id]]);

        //item.action.add(this.element(this.state.nodeData["_"+subdata[this.state.map.id]],subdata.space,[]));
        this.setState(this.state);

    }
    /**
     * 修改节点
     * @param item
     */
    updateNode=(item)=>{
        this.setState(this.state);
    }

    /**
     * 当图表点击的时候
     * @param isExpend
     * @param ds
     */
    icoClick=(isExpend,ds)=>{
        //ds.action.expend(isExpend);
        if(this.props.icoClick){
          this.props.icoClick(isExpend,ds);
        }
        this.expend(!isExpend,ds[this.state.map.id])
        this.state.parentData["_"+ds[this.state.map.pid]].map(
            (item)=>{
                if(item[this.state.map.id]!=ds[this.state.map.id]){
                  if(this.props.joinAction){
                      let arr=this.props.joinAction.split(",");
                      for(let ac in arr){
                        item[arr[ac]].expend(false);
                      }
                  }else{
                      item[this.props.action].expend(false);
                  }

                }
            }
        )
    }

    expend=(state,id)=>{
        if(this.props.joinAction){
            let arr=this.props.joinAction.split(",");
            for(let ac in arr){
              this.state.nodeData["_"+id][arr[ac]].expend(state);
            }
        }else{
            this.state.nodeData["_"+id][this.props.action].expend(state);
        }

    }

    /**
    *是否有子节点
    *@param id 当前树编号
    *@return {bool} true|false
    */
    hasChildren=(id)=>{
      return this.state.parentData["_"+id].length>0;
    }

    deleteItem=(item)=>{

         for(let key in item._data.ids){
             delete this.state.parentData["_"+key];
             delete this.state.nodeData["_"+key];
         }

         delete this.state.parentData["_"+item[this.state.map.id]];
         delete this.state.nodeData["_"+item[this.state.map.id]];
         this.state.parentData["_"+item[this.state.map.pid]]=this.state.parentData["_"+item[this.state.map.pid]].filter((sitem)=>{
            return sitem[this.state.map.id]!=item[this.state.map.id]
         });
         //this.state.nodeData["_"+item[this.state.map.pid]].space=this.state.nodeData["_"+item[this.state.map.pid]].space+1;
         //console.log(this.state);
         //刷新父节点
         // let parent=this.state.nodeData["_"+item[this.state.map.pid]]
         // if(parent){
         //   parent.action.flush();
         // }
         this.setState(this.state);

    }
    /**
     * 行点击时间
     * @param e 事件对象
     * @param ds 数据源
     */
    itemClick=(e,ds)=>{
        if(this.props.itemClick){
            this.props.itemClick(e,ds);
        }
    }
    /**
     * 绘制树的节点
     * @param ds 数据源
     * @param space 空格数
     * @param childs 子对象
     * @returns {*} 树节点
     */
    element=(ds,space,childs)=>{
        ds._data={ids:{}};

        return <TreeViewElement action={this.props.action} joinAction={this.props.joinAction} alldata={this.state.nodeData} parentData={this.state.parentData} isCheckBox={this.state.isCheckBox} space={space} itemClick={this.itemClick} icoClick={this.icoClick} dataSource={ds} childrenNode={childs}>{this.renderTreeViewElement(ds)}</TreeViewElement>
    }

    renderTreeViewElement=(ds)=>{
        if(this.props.renderTreeNode){
            return this.props.renderTreeNode(ds);
        }
        return ds[this.state.map.name]
    }

    render(){
        try{
            if(!this.state.defaultinit){
                if(this.props.map){
                    this.state.map=this.props.map;
                }

                this.props.dataSource.map((node)=>{
                    let id=node[this.state.map.id];
                    let pid=node[this.state.map.pid];
                    if(!this.state.parentData["_"+pid]){
                        this.state.parentData["_"+pid]=[];
                    }
                    this.state.nodeData["_"+id]=node;
                    this.state.parentData["_"+pid].push(this.state.nodeData["_"+id]);
                    this.state.defaultinit=true;
                })
            }
        }catch (e) {
            console.error("错误",e);
        }
        let i=0;
        let startId=0;
        if(this.props.startId){
          startId=this.props.startId;
        }
        return (
            <div className={"treeview noselect"} >
                <dl style={{display:'table'}}>
                {
                      this.state.parentData["_"+startId].map((item)=>{
                      item.space=0;
                      return  <dt> {this.element(item,item.space,this.renderSubNode(item,1))}</dt>
                    })
                }
                </dl>
            </div>
        );
    }
}
